<template>
    <div class="command-manage">
        <el-card>
            <div slot="header">
                <span>命令管理</span>
                <el-button type="primary" style="float: right" @click="handleAddCommand">
                    新增命令
                </el-button>
            </div>

            <!-- 搜索区域 -->
            <div class="search-area">
                <el-form :inline="true" :model="searchForm">
                    <el-form-item label="命令名称">
                        <el-input v-model="searchForm.name" placeholder="请输入命令名称"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="searchForm.status" placeholder="请选择状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 表格 -->
            <el-table :data="commandList" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="name" label="命令名称"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="syntax" label="语法"></el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status ? 'success' : 'danger'">
                            {{ scope.row.status ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" :type="scope.row.status ? 'warning' : 'success'"
                            @click="handleToggleStatus(scope.row)">
                            {{ scope.row.status ? '禁用' : '启用' }}
                        </el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-area">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>
  
<script>
export default {
    name: 'CommandManage',
    data() {
        return {
            searchForm: {
                name: '',
                status: ''
            },
            commandList: [
                {
                    id: 1,
                    name: 'ls',
                    description: '列出目录内容',
                    syntax: 'ls [选项] [文件]',
                    status: true,
                    createTime: '2023-01-01 10:00:00'
                },
                {
                    id: 2,
                    name: 'cd',
                    description: '切换目录',
                    syntax: 'cd [目录]',
                    status: true,
                    createTime: '2023-01-01 10:00:00'
                },
                {
                    id: 3,
                    name: 'pwd',
                    description: '显示当前工作目录',
                    syntax: 'pwd',
                    status: false,
                    createTime: '2023-01-01 10:00:00'
                }
            ],
            pagination: {
                currentPage: 1,
                pageSize: 10,
                total: 3
            }
        }
    },
    methods: {
        handleSearch() {
            console.log('搜索:', this.searchForm)
        },
        handleReset() {
            this.searchForm = {
                name: '',
                status: ''
            }
        },
        handleAddCommand() {
            this.$message.info('点击了新增命令')
        },
        handleEdit(command) {
            this.$message.info(`编辑命令: ${command.name}`)
        },
        handleToggleStatus(command) {
            this.$message.info(`${command.status ? '禁用' : '启用'}命令: ${command.name}`)
        },
        handleDelete(command) {
            this.$confirm(`确定要删除命令 "${command.name}" 吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('删除成功')
            })
        },
        handleSizeChange(size) {
            this.pagination.pageSize = size
        },
        handleCurrentChange(page) {
            this.pagination.currentPage = page
        }
    }
}
</script>
  
<style scoped>
.search-area {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 4px;
}

.pagination-area {
    margin-top: 20px;
    text-align: right;
}
</style>